<template>
  <!-- 第二步：准备具备大小的dom容器 -->
  <div id="main"></div>
</template>

<script>
// 第一步：下载并引入echarts
import * as echarts from "echarts";

export default {
  mounted() {
    // 第三步：基于准备好的dom，初始化echarts实例 echarts.init(dom容器)
    var myChart = echarts.init(document.getElementById("main"));
    // 第四步：指定配置项option
    let option = {
      title: {
        text: "ECharts 入门示例",
      },
      legend: {},
      tooltip: {},
      xAxis: {
        data: ["学生", "白给战士", "卷王", "通宵人", "摸鱼王"],
      },
      yAxis: {},
      series: [
        {
          name: "数量",
          type: "bar",
          data: [50, 50, 1, 100, 200],
        },
      ],
    };
    // 第五步：绘制图表，把配置项给实例对象
    myChart.setOption(option);
  },
};
</script>

<style>
/* 第二步 */
#main {
  width: 100%;
  height: 100%;
  margin: auto;
}
</style>
